<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AI智能改写 - 论文降重工具</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-plus/dist/index.css"
    />
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <script src="js/uni.webview.js"></script>
    <style>
      .gradient-text {
        background: linear-gradient(90deg, #3b82f6, #8b5cf6);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
      .gradient-bg {
        background: linear-gradient(135deg, #3b82f6, #8b5cf6);
      }
      .chat-height {
        height: calc(100vh - 180px);
      }
      .textarea-height {
        height: calc(100vh - 340px);
      }
      .output-height {
        height: calc(100vh - 340px);
      }
      .sidebar-height {
        height: calc(100vh - 180px);
      }
    </style>
  </head>
  <body class="bg-gray-50">
    <div id="app">
      <!-- 导航栏 -->
      <nav class="bg-white shadow-md w-full">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div class="flex justify-between h-16">
            <div class="flex">
              <div class="flex-shrink-0 flex items-center">
                <a href="index.html" class="text-2xl font-bold gradient-text"
                  >AI智能改写</a
                >
              </div>
              <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
                <a
                  href="index.html"
                  class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
                  >首页</a
                >
                <a
                  href="main.html"
                  class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
                  >开始使用</a
                >
                <a
                  href="profile.html"
                  class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
                  >个人中心</a
                >
              </div>
            </div>
            <div class="hidden sm:ml-6 sm:flex sm:items-center">
              <div class="flex items-center">
                <span class="text-sm text-gray-500 mr-2"
                  >剩余Token:
                  <span class="text-indigo-600 font-medium">1250</span></span
                >
                <el-tooltip content="购买更多Token" placement="bottom">
                  <a
                    href="recharge.html"
                    class="text-sm text-indigo-600 hover:text-indigo-800 font-medium"
                  >
                    <i class="fas fa-plus-circle"></i> 充值
                  </a>
                </el-tooltip>
              </div>
              <div class="ml-4 relative flex-shrink-0">
                <div>
                  <button
                    type="button"
                    class="bg-white rounded-full flex text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                  >
                    <img
                      class="h-8 w-8 rounded-full"
                      src="https://randomuser.me/api/portraits/men/75.jpg"
                      alt="用户头像"
                    />
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </nav>

      <!-- 主体内容区 -->
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <div class="grid grid-cols-12 gap-6">
          <!-- 左侧对话记录 -->

          <!-- 右侧内容区 -->
          <div class="col-span-9 grid gap-6">
            <!-- 工具栏 -->
            <div class="bg-white rounded-lg shadow-sm p-4">
              <div class="flex items-center justify-between">
                <div class="flex space-x-3">
                  <el-button
                    type="primary"
                    class="gradient-bg"
                    @click="sendData"
                  >
                    <i class="fas fa-sync-alt mr-1"></i> 开始降重
                  </el-button>
                  <el-button @click="getModel">
                    <i class="fas fa-file-upload mr-1"></i> 上传文档
                  </el-button>
                  <el-button>
                    <i class="fas fa-file-download mr-1"></i> 导出结果
                  </el-button>
                </div>
                <div class="flex space-x-4">
                  <el-select v-model="selectValue" placeholder="降重模式">
                    <el-option label="温和降重" value="mild"></el-option>
                    <el-option label="标准降重" value="normal"></el-option>
                    <el-option label="强力降重" value="strong"></el-option>
                  </el-select>
                  <el-tooltip
                    content="请选择降重力度，力度越大改写越明显"
                    placement="top"
                  >
                    <i
                      class="fas fa-question-circle text-gray-400 self-center"
                    ></i>
                  </el-tooltip>
                </div>
              </div>
            </div>

            <!-- 输入输出区域 -->
            <div class="grid grid-cols-2 gap-6">
              <!-- 输入框 -->
              <div class="bg-white rounded-lg shadow-sm">
                <div
                  class="px-4 py-3 border-b border-gray-200 flex justify-between items-center"
                >
                  <h2 class="text-lg font-medium text-gray-900">原文内容</h2>
                  <div class="flex items-center">
                    <span class="text-xs text-gray-500 mr-3"
                      >已输入: <span class="text-indigo-600">0</span> 字</span
                    >
                    <button
                      type="button"
                      class="text-gray-400 hover:text-gray-500"
                    >
                      <i class="fas fa-trash-alt"></i>
                    </button>
                  </div>
                </div>
                <div class="p-4">
                  <el-input
                    v-model="textInput"
                    type="textarea"
                    placeholder="请输入需要降重的论文内容，或者上传Word文档"
                    :rows="18"
                    class="textarea-height"
                  ></el-input>
                </div>
              </div>

              <!-- 输出框 -->
              <div class="bg-white rounded-lg shadow-sm">
                <div
                  class="px-4 py-3 border-b border-gray-200 flex justify-between items-center"
                >
                  <h2 class="text-lg font-medium text-gray-900">降重结果</h2>
                  <div class="flex items-center">
                    <span class="text-xs text-gray-500 mr-3"
                      >预计降重率: <span class="text-green-600">65%</span></span
                    >
                    <button
                      type="button"
                      class="text-gray-400 hover:text-gray-500 mr-2"
                    >
                      <i class="fas fa-copy"></i>
                    </button>
                    <button
                      type="button"
                      class="text-gray-400 hover:text-gray-500"
                    >
                      <i class="fas fa-download"></i>
                    </button>
                  </div>
                </div>
                <div class="p-4 output-height overflow-y-auto">
                  <div
                    class="text-gray-500 text-center flex flex-col items-center justify-center h-full"
                  >
                    <i class="fas fa-robot text-5xl text-gray-300 mb-4"></i>
                    <p>降重结果将在这里显示</p>
                    <p class="text-sm mt-2">
                      点击"开始降重"按钮开始处理您的文本
                    </p>
                  </div>
                  <!-- 结果示例 (默认隐藏) -->
                  <div class="hidden">
                    <p>
                      随着信息技术的快速进步，人工智能(AI)已经深入融入现代教育体系中，为教学方法和学习体验带来了翻天覆地的变化。人工智能技术通过其强大的数据分析能力和智能算法，能够实现个性化学习路径的设计，使得教育资源分配更加高效和公平。
                    </p>
                    <p>
                      在传统教学环境中，教师往往难以兼顾每个学生的学习进度和需求，而AI辅助教学系统则能够根据学生的学习表现和偏好，动态调整教学内容和方式，提供量身定制的学习体验。这不仅提高了学习效率，也激发了学生的自主学习兴趣。
                    </p>
                    <p>
                      此外，人工智能在教育评估领域也展现出巨大潜力。传统的考试评估方式常常只能衡量学生在特定时间点的知识掌握情况，缺乏对学习全过程的监测。而基于AI的持续评估系统，则可以通过分析学生日常学习行为和成果，提供更全面、客观的评价，帮助教育者及时发现并解决学习中的问题。
                    </p>
                  </div>
                </div>
              </div>
            </div>

            <!-- 底部信息 -->
            <div
              class="bg-white rounded-lg shadow-sm p-4 flex justify-between items-center"
            >
              <div class="flex items-center">
                <span class="text-sm text-gray-500"
                  >当前模式:
                  <span class="font-medium text-indigo-600"
                    >标准降重</span
                  ></span
                >
                <span class="mx-4 text-gray-300">|</span>
                <span class="text-sm text-gray-500"
                  >预计消耗Token:
                  <span class="font-medium text-indigo-600">25</span></span
                >
              </div>
              <div>
                <el-progress
                  :percentage="0"
                  :format="format"
                  :stroke-width="8"
                  status="success"
                ></el-progress>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script>
      const { createApp, ref } = Vue;

      const app = createApp({
        setup() {
          const textInput = ref("");
          const selectValue = ref("normal");
          const modelItem = ref(null);

          const format = (percentage) => {
            return percentage === 0 ? "" : `${percentage}%`;
          };

          let response_format = { type: "text" };
          let tools = [];

          function sendData() {
            let requestData = {
              model: modelItem.value.model,
              messages: [
                { role: "system", content: `${modelItem.value.messages}` },
              ],
              stream: false,
              max_tokens: modelItem.value.max_tokens,
              temperature: modelItem.value.temperature,
              top_p: modelItem.value.top_p,
              top_k: modelItem.value.top_k,
              frequency_penalty: modelItem.value.frequency_penalty,
              n: modelItem.value.n,
              response_format: response_format,
              tools: tools,
            };
            const options = {
              method: "POST",
              headers: {
                Authorization:
                  "Bearer sk-luhfrsjklifoglkajdapacfphwqsynbufmnwscskjquiwklb",
                "Content-Type": "application/json",
              },
              body: JSON.stringify(requestData),
            };

            fetch("https://api.siliconflow.cn/v1/chat/completions", options)
              .then((response) => response.json())
              .then((response) => console.log(response))
              .catch((err) => console.error(err));
          }

          async function getModel() {
            const requestData = {
              model: "Qwen/QwQ-32B",
            };
            const options = {
              method: "POST",
              headers: {
                Authorization:
                  "Bearer sk-luhfrsjklifoglkajdapacfphwqsynbufmnwscskjquiwklb",
              },
              body: JSON.stringify(requestData),
            };

            fetch(
              "https://fc-mp-449533c5-d110-4d13-b97d-f233db1fe3a2.next.bspapp.com/lunwen/model",
              options
            )
              .then((response) => response.json())
              .then((response) => {
                modelItem.value = response;
              })
              .catch((err) => console.error(err));
          }

          window.addEventListener("message", (event) => {

            console.log("收到消息：", event, event.data);

            // 回信
            event.source.postMessage(
              "hi there yourself!  the secret response " + "is: rheeeeet!",
              event.origin
            );
          });

          // setInterval(() => {
          //   console.log("BBBB")
          // }, 1000);

          getModel();

          return {
            textInput,
            selectValue,
            format,
            sendData,
            getModel,
          };
        },
      });

      app.use(ElementPlus);
      app.mount("#app");
    </script>
  </body>
</html>
